<template>
    <div class="flex-center" style="width: 100%;height: 700px;background: #171D20">
        <div style="position: absolute;float: right;right: 100px;top: 100px" class="flex-center-col">
<!--            <YButton text="恢复" @click="initList()"></YButton>-->
            <button @click="initList">复原</button>
<!--            <YButton text="没什么用的按钮" style="margin-top: 30px"></YButton>-->
        </div>
        <div class="test-box">
            <img src="http://www.youlibin.top:8090/image/9a44245552-hesuan-tou.png" alt="无">
            <table >
                <tr v-for="item in obj.list"
                    :style="{height: item.height+'px',verticalAlign:item.vertical}"
                    :class="item.divider===true?'divider':''"
                >
                    <td>
                        <strong>
                            {{item.title}}
                        </strong></td>
                    <td class="test-content" style="width: 250px">
                        <input type="text" v-model="item.content"/>
                    </td>
                </tr>
            </table>
            <table border style=" border: 2px solid #67CFAC;margin-bottom: 20px">
                <tr style="color: white;background-color: #67CFAC;border: 1px solid #FFFFFF">
                    <td>项目名称</td>
                    <td>项目结果</td>
                    <td>参考范围值</td>
                </tr>
                <tr style="font-weight: 600;border: 1px solid white;outline: none">
                    <td>新型冠状病毒核酸检测</td>
                    <td>阴性</td>
                    <td>阴性</td>
                </tr>
            </table>
<!--            <img src="../../assets/image/hesuan-bottom.png" alt="无">-->
        </div>
    </div>

</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import YButton from "@/components/btn/YButton";

    export default {
        name: "Test",
        components: {YButton},
        setup(){
            let obj= reactive({
                tmpList:[
                    {
                        title:"报告单号:",
                        content:Math.floor(Math.random()*Math.pow(10,6)),
                        height:50,
                        divider:true,
                        vertical:'top',

                    },
                    {
                        title:"患者姓名:",
                        content:"游",
                        height:50,
                        divider:false,
                        vertical:'bottom'
                    },
                    {
                        title:"患者性别:",
                        content:"男",
                        height:30,
                        divider:false
                    },
                    {
                        title:"卡号:",
                        content:"511",
                        height:30,
                        divider:false
                    },
                    {
                        title:"病历号:",
                        content:"2022082631",
                        height:50,
                        divider:true,
                        vertical:'top'

                    },{
                        title:"科室名称:",
                        content:"检科室",
                        height:50,
                        divider:false,
                        vertical:'bottom'
                    },{
                        title:"报告类型:",
                        content:"临检",
                        height:30,
                        divider:false
                    },
                    {
                        title:"送检日期:",
                        content:"20220826 12:00:17",
                        height:30,
                        divider:false
                    },
                    {
                        title:"发布日期:",
                        content:"20220826 17:14:42",
                        height:50,
                        divider:true,
                        vertical:'top'


                    }

                ],
                list:[]
            })

            let initList=()=>{
                obj.list=[]
                for( let item of obj.tmpList){
                    obj.list.push({
                        ...item
                    })
                }
            }

            onMounted(()=>{
                initList()
            })

            return{
                obj,
                initList

            }
        }
    }
</script>

<style scoped lang="less">
    .test-box{

        background: white;
        width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        img{
            width: 404px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        table{
            width: 400px;
            border-collapse: collapse;
        }
        tr{
            text-align: left;

        }

        td{
            padding-left: 10px;

        }
        input{
            border: 1px;
            outline: none;

        }
        .divider{
            border-bottom: 1px solid #67CFAC;
        }
        .test-content{
            font-weight: 500;
        }
    }
</style>